<template>
	<div id="eee">
		
	</div>
</template>

<script>
	import axios from 'axios'
	import * as echarts from 'echarts';
	export default {
		mounted() {
			this.echartsTop()
		},
		methods: {
			echartsTop() {
				var echart = echarts.init(document.getElementById("eee"));
				var option = {
					title:{text:"最近30天合格率趋势图"},
					xAxis: {
						type: 'category',
						data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15',
							'16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29',
							'30'
						]
					},
					
					yAxis: {
						type: "value"
					},
					series: [{
						data: this.list1,
						type: 'bar',
						color: ["#47a4a5"]
					}]
				};
				echart.setOption(option);
				this.list1 = []
			},

			getProduct() {
				axios.get("api/Product")
					.then(res => {
						if (res.data.code === 0) {
							if (this.flag) {
								this.list = res.data.data.list
								this.list.forEach(item => {
									this.list1.push(item.id)

								})
								this.$nextTick(() => {
									this.echartsTop();

								});
								this.flag = false
							} else {
								this.list = res.data.data.list2
								this.list.forEach(item => {
									this.list1.push(item.id)

								})
								this.$nextTick(() => {
									this.echartsTop();

								});
								this.flag = true
							}


						}
					})
			},
			timer(){
				this.timers = setInterval(()=>{
					this.getProduct()
				}, 1000)
				
			}

		},
		created() {
			this.getProduct()
			this.timer()
		},
		beforeDestroy(){
			clearInterval(this.timers)
		},
		data() {
			return {
				list: [],
				list1: [],
				flag: true,
				timers:null
			}
		}
	}
</script>

<style scoped lang="scss">
	#eee {
		height: 300px;
		width: 100%;
	}
</style>
